var valElementSettings = {};
jQuery(function() {
	
	//Active event change element settings
	changeElementSettings();
	
	//Set value data 
	setSettingToAllElements();
});

/** =============================================================================================================================================================================== 
 * Apply setting to elements
 * =============================================================================================================================================================================== */
setSettingToAllElements = function () {
	jQuery.each(mapElements, function (key, element) {
		setSettingElement(element);
	});
};

setSettingElement = function (element) {
	if (element['type'].indexOf("-cols") != -1) {
		jQuery.each(element['colums'], function (ind1, elm1) {
			jQuery.each(elm1, function (ind2, elm2) {
				setSettingElement(elm2);
			});
		});
	} else {
		setValueSetting(element['id'], element['type']);
	}
};

/** =============================================================================================================================================================================== 
 * Acitive Change Element Setting
 * =============================================================================================================================================================================== */
changeElementSettings = function () {
	jQuery("#nino-form-builder-area .changeElementSettings").unbind('click');
	jQuery("#nino-form-builder-area .changeElementSettings").click(function () {
		jQuery("#nino-form-builder-area .changeElementSettings").removeClass("nino-selected");
		jQuery(this).addClass("nino-selected");
		
		var elementType = jQuery(this).attr("nino-type");
		var id = jQuery(this).attr("id");
		var heading_group = ["h1", "h2", "h3", "h4", "h5", "h6"];
			
		//Open elements settings area
		openProperty();
		jQuery("#nino-fieldSettingArea .element-settings").removeClass("nino-open");
		if (jQuery.inArray(elementType, heading_group) !== -1) {
			jQuery("#heading-settings").addClass("nino-open");
		} else {
			jQuery("#" + elementType + "-settings").addClass("nino-open");
		}
		
		setValueSetting(id, elementType);
		
		return false;
	});
};

setValueSetting = function (id, elementType) {
	var heading_group = ["h1", "h2", "h3", "h4", "h5", "h6"];
	
	if (jQuery.inArray(elementType, heading_group) !== -1) {
		jQuery("#heading-settings > div").attr("id", id+"-element-settings");
	} else {
		jQuery("#" + elementType + "-settings > div").attr("id", id+"-element-settings");
	}
	
	switch (elementType) {
		case 'text':
			initTextSettings(id);
			break;
		
		case 'select':
			initSelectSettings(id);
			break;
			
		case 'textarea':
			initTextAreaSettings(id);
			break;
		
		case 'checkbox':
			initCheckboxSettings(id);
			break;
			
		case 'radio':
			initRadioSettings(id);
			break;
		
		case 'captcha':
			initCaptchaSettings(id);
			break;
		
		case 'submit':
			initSubmitSettings(id);
			break;
			
		case 'paragraph': 
			initParagraphSettings(id);
			break;
		
		case 'social-link':
			initSocialSettings(id);
			break;
			
		case 'h1':
		case 'h2':
		case 'h3':
		case 'h4':
		case 'h5':
		case 'h6':
			initHeadingSettings(id);
			break;
		
		default:
			console.log(elementType + " chua lam");
			break;
	}
};

/** =============================================================================================================================================================================== 
 * Active Show Hide Property
 * =============================================================================================================================================================================== */
openProperty = function () {
	openLeftSide();
	jQuery("#nino-fieldSettingArea").removeClass("nino-hidden");
};

closeProperty = function () {
	closeLeftSide();
	jQuery("#nino-fieldSettingArea").addClass("nino-hidden");
};

/** =============================================================================================================================================================================== 
 * Init Element Settings Config
 * =============================================================================================================================================================================== */

/**
 * Init Text Setting
 */
initTextSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'label' : {
			
			//label-text
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-text-label-settings .label-text input[name="label-text"]',
						'destination' : '#' + id + ' label .nino-labelName',
						'attr': {
							'name': 'value',
							'value': 'Label text'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-text-label-settings .label-text .nino-color-box',
						'destination': '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'color',
							'value': '9c3b9c'
						}
					}
				}
			},
			
			//sub-text
			'sub-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-text-label-settings .sub-text input[name="sub-text"]',
						'destination' : '#' + id + ' label .nino-subLabel',
						'attr': {
							'name': 'value',
							'value': 'Sub text Lorem ipsum dolor sit amet, consectetur'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-text-label-settings .sub-text .nino-color-box',
						'destination': '#' + id + ' label .nino-subLabel',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//label-icon
			'label-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-text-label-settings .label-icon .nino-font-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'class' : {
							'value': 'icon-user'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-text-label-settings .label-icon .nino-color-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-text-label-settings .fonts select',
						'destination' : '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-text-label-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' label .nino-labelName',
						'amount': '#' + id + '-element-settings .nino-text-label-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 12
						}
					}
				}
			},
			
		},
		'input': {
			
			//placeholder
			'placeholder': {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-text-input-settings .placeholder input[name="placeholder"]',
						'destination' : '#' + id + ' .nino-input input',
						'attr': {
							'name': 'placeholder',
							'value': 'Placeholder'
						}
					}
				}
			},
			
			//input-value
			'input-value': {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-text-input-settings .input-value input[name="input-value"]',
						'destination' : '#' + id + ' .nino-input input',
						'attr': {
							'name': 'value',
							'value': 'Placeholder'
						}
					}
				}
			},
			
			//input-icon
			'input-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-text-input-settings .input-icon .nino-font-box',
						'destination': '#' + id + ' .nino-input .nino-icon',
						'class' : {
							'value': 'icon-user'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-text-input-settings .input-icon .nino-color-box',
						'destination': '#' + id + ' .nino-input .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
		},
		'validation': {
			
			//required
			'required': {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-text-validation-settings .required .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup',
						'options' : {
							'no' : {
								'removeClass' : 'nino-required'
							},
							'yes' : {
								'addClass' : 'nino-required'
							},
							'value' : 'yes',
						},
						'class' : {
							'value': 'nino-required',
						}
					}
				}
			},
			
			//required-message
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-text-validation-settings .required-message input',
						'destination' : '#' + id + ' .nino-error-message',
						'events' : {
							'focusin' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'focusout': {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						},
						'attr': {
							'name': 'value',
							'value': 'This is a required field'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-text-validation-settings .required-message .nino-color-box',
						'destination': '#' + id + ' .nino-error-message',
						'css': {
							'name': 'color',
							'value': '545454'
						},
						'events' : {
							'onShow' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'onHide' : {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						}
					}
				}
			},
		},
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};

/**
 * Init Select Setting
 */
initSelectSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'label' : {
			//label-text
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-select-label-settings .label-text input[name="label-text"]',
						'destination' : '#' + id + ' label .nino-labelName',
						'attr': {
							'name': 'value',
							'value': 'Select box'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-select-label-settings .label-text .nino-color-box',
						'destination': '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//sub-text
			'sub-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-select-label-settings .sub-text input[name="sub-text"]',
						'destination' : '#' + id + ' label .nino-subLabel',
						'attr': {
							'name': 'value',
							'value': 'Sub text'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-select-label-settings .sub-text .nino-color-box',
						'destination': '#' + id + ' label .nino-subLabel',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//label-icon
			'label-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-select-label-settings .label-icon .nino-font-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'class' : {
							'value': 'icon-user'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-select-label-settings .label-icon .nino-color-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-select-label-settings .fonts select',
						'destination' : '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-select-label-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' label .nino-labelName',
						'amount': '#' + id + '-element-settings .nino-select-label-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		},
		'input' : {
			//list-of-choice
			'list-of-choice' : {
				'type' : 'list-options',
				'settings' : {
					'list' : {
						'source' : '#' + id + '-element-settings .nino-select-input-settings .nino-formGroup ul.options-destination',
						'source-clone' : '#' + id + '-element-settings .nino-select-input-settings .nino-formGroup ul.options-source-clone li.type-radio',
						'destination' : '#' + id + ' .nino-formGroup select',
						'add-clone': '#' + id + '-element-settings .nino-select-input-settings .nino-formGroup .nino-addMoreChoice',
						'type' : 'select',
						'options' : {
							'option1' : {
								'name' : 'option1',
								'value' : 'option1'
							},
							'option2' : {
								'name' : 'option2',
								'value' : 'option2',
							}
						},
						'order' : ['option1', 'option2'],
						'default' : ['option1']
					}
				}
			},
			
			//input-text-color
			'input-text-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-select-input-settings .input-text-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup select',
						'display' : '#' + id + '-element-settings .nino-select-input-settings .input-text-color .nino-input-color-display',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//input-background-color
			'input-background-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-select-input-settings .input-background-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup select',
						'display' : '#' + id + '-element-settings .nino-select-input-settings .input-background-color .nino-input-color-display',
						'css': {
							'name': 'background-color',
							'value': 'ffffff'
						}
					}
				}
			},
			
			//border-color
			'border-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-select-input-settings .border-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup select',
						'display' : '#' + id + '-element-settings .nino-select-input-settings .border-color .nino-input-color-display',
						'css': {
							'name': 'border-color',
							'value': '545454'
						}
					}
				}
			},
			
			//border-width
			'border-width': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-select-input-settings .border-width .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup select',
						'amount': '#' + id + '-element-settings .nino-select-input-settings .border-width .nino-amount',
						'min' : 1,
						'max' : 5,
						'css': {
							'name': 'border-width',
							'value': 1
						}
					}
				}
			},
			
			//border-radius
			'border-radius': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-select-input-settings .border-radius .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup select',
						'amount': '#' + id + '-element-settings .nino-select-input-settings .border-radius .nino-amount',
						'min' : 1,
						'max' : 20,
						'css': {
							'name': 'border-radius',
							'value': 0
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-select-input-settings .fonts select',
						'destination' : '#' + id + ' .nino-formGroup select',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-select-input-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup select',
						'amount': '#' + id + '-element-settings .nino-select-input-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		},
		'validation' : {
			//required
			'required': {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-select-validation-settings .required .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup',
						'options' : {
							'no' : {
								'removeClass' : 'nino-required'
							},
							'yes' : {
								'addClass' : 'nino-required'
							},
							'value' : 'yes',
						},
						'class' : {
							'value': 'nino-required',
						}
					}
				}
			},
			
			//required-message
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-select-validation-settings .required-message input',
						'destination' : '#' + id + ' .nino-error-message',
						'events' : {
							'focusin' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'focusout': {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						},
						'attr': {
							'name': 'value',
							'value': 'This is a required field'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-select-validation-settings .required-message .nino-color-box',
						'destination': '#' + id + ' .nino-error-message',
						'css': {
							'name': 'color',
							'value': '545454'
						},
						'events' : {
							'onShow' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'onHide' : {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						}
					}
				}
			},
		}
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};

/**
 * Init Text Area Setting
 */
initTextAreaSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'label' : {
			//label-text
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-textarea-label-settings .label-text input[name="label-text"]',
						'destination' : '#' + id + ' label .nino-labelName',
						'attr': {
							'name': 'value',
							'value': 'TextArea Box'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-textarea-label-settings .label-text .nino-color-box',
						'destination': '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//sub-text
			'sub-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-textarea-label-settings .sub-text input[name="sub-text"]',
						'destination' : '#' + id + ' label .nino-subLabel',
						'attr': {
							'name': 'value',
							'value': 'Sub text'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-textarea-label-settings .sub-text .nino-color-box',
						'destination': '#' + id + ' label .nino-subLabel',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//label-icon
			'label-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-textarea-label-settings .label-icon .nino-font-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'class' : {
							'value': 'icon-comment'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-textarea-label-settings .label-icon .nino-color-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-textarea-label-settings .fonts select',
						'destination' : '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-textarea-label-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' label .nino-labelName',
						'amount': '#' + id + '-element-settings .nino-textarea-label-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		},
		'input' : {
			
			//placeholder
			'placeholder': {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-textarea-input-settings .placeholder input[name="placeholder"]',
						'destination' : '#' + id + ' .nino-input textarea',
						'attr': {
							'name': 'placeholder',
							'value': 'Placeholder'
						}
					}
				}
			},
			
			//input-value
			'input-value': {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-textarea-input-settings .input-value input[name="input-value"]',
						'destination' : '#' + id + ' .nino-input textarea',
						'attr': {
							'name': 'value',
							'value': 'Placeholder'
						}
					}
				}
			},
			
			//input-icon
			'input-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-textarea-input-settings .input-icon .nino-font-box',
						'destination': '#' + id + ' .nino-input .nino-icon',
						'class' : {
							'value': 'icon-comment'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-textarea-input-settings .input-icon .nino-color-box',
						'destination': '#' + id + ' .nino-input .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//height
			'height' : {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-textarea-input-settings .height input[name="height"]',
						'destination' : '#' + id + ' .nino-input textarea',
						'css': {
							'name': 'height',
							'value': 200
						}
					}
				}
			},
			
			//width
			'maximum-characters' : {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-textarea-input-settings .maximum-characters input[name="maximum-characters"]',
						'destination' : '#' + id + ' .nino-input textarea',
						'attr': {
							'name': 'maxlength',
							'value': 200
						}
					}
				}
			}
			
		},
		'validation' : {
			//required
			'required': {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-textarea-validation-settings .required .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup',
						'options' : {
							'no' : {
								'removeClass' : 'nino-required'
							},
							'yes' : {
								'addClass' : 'nino-required'
							},
							'value' : 'yes',
						},
						'class' : {
							'value': 'nino-required',
						}
					}
				}
			},
			
			//required-message
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-textarea-validation-settings .required-message input',
						'destination' : '#' + id + ' .nino-error-message',
						'events' : {
							'focusin' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'focusout': {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						},
						'attr': {
							'name': 'value',
							'value': 'This is a required field'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-textarea-validation-settings .required-message .nino-color-box',
						'destination': '#' + id + ' .nino-error-message',
						'css': {
							'name': 'color',
							'value': '545454'
						},
						'events' : {
							'onShow' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'onHide' : {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						}
					}
				}
			},
		}
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};

/**
 * Init Checkbox Setting
 */
initCheckboxSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'label' : {
			//label-text
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-checkbox-label-settings .label-text input[name="label-text"]',
						'destination' : '#' + id + ' label .nino-labelName',
						'attr': {
							'name': 'value',
							'value': 'Checkbox'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-checkbox-label-settings .label-text .nino-color-box',
						'destination': '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//sub-text
			'sub-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-checkbox-label-settings .sub-text input[name="sub-text"]',
						'destination' : '#' + id + ' label .nino-subLabel',
						'attr': {
							'name': 'value',
							'value': 'Lorem ipsum dolor sit amet, consectetur'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-checkbox-label-settings .sub-text .nino-color-box',
						'destination': '#' + id + ' label .nino-subLabel',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//label-icon
			'label-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-checkbox-label-settings .label-icon .nino-font-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'class' : {
							'value': 'icon-user'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-checkbox-label-settings .label-icon .nino-color-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-checkbox-label-settings .fonts select',
						'destination' : '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-checkbox-label-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' label .nino-labelName',
						'amount': '#' + id + '-element-settings .nino-checkbox-label-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		},
		'input' : {
			//list-of-choice
			'list-of-choice' : {
				'type' : 'list-options',
				'settings' : {
					'list' : {
						'source' : '#' + id + '-element-settings .nino-checkbox-input-settings .nino-formGroup ul.options-destination',
						'source-clone' : '#' + id + '-element-settings .nino-checkbox-input-settings .nino-formGroup ul.options-source-clone li.type-checkbox',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style',
						'add-clone': '#' + id + '-element-settings .nino-checkbox-input-settings .nino-formGroup .nino-addMoreChoice',
						'type' : 'checkbox',
						'options' : {
							'checkbox1' : {
								'name' : 'checkbox1',
								'value' : 'checkbox1'
							},
							'checkbox2' : {
								'name' : 'checkbox2',
								'value' : 'checkbox2',
							},
							'checkbox3' : {
								'name' : 'checkbox3',
								'value' : 'checkbox3',
							}
						},
						'order' : ['checkbox1', 'checkbox2', 'checkbox3'],
						'default' : ['checkbox1', 'checkbox3']
					}
				}
			},
			
			//input-text-color
			'input-text-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-checkbox-input-settings .input-text-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup ul.nino-input-style',
						'display' : '#' + id + '-element-settings .nino-checkbox-input-settings .input-text-color .nino-input-color-display',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//styles
			'styles': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-checkbox-input-settings .styles select',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style',
						'class': {
							'group': 'style-*',
							'value': 'style-1',
						}
					}
				}
			},
			
			//display
			'display' : {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-checkbox-input-settings .display .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style',
						'class': {
							'group': 'display-*',
							'value' : 'display-none'
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-checkbox-input-settings .fonts select',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style label',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-checkbox-input-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style label',
						'amount': '#' + id + '-element-settings .nino-checkbox-input-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
		},
		'validation' : {
			//required
			'required': {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-checkbox-validation-settings .required .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup',
						'options' : {
							'no' : {
								'removeClass' : 'nino-required'
							},
							'yes' : {
								'addClass' : 'nino-required'
							},
							'value' : 'yes',
						},
						'class' : {
							'value': 'nino-required',
						}
					}
				}
			},
			
			//required-message
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-checkbox-validation-settings .required-message input',
						'destination' : '#' + id + ' .nino-error-message',
						'events' : {
							'focusin' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'focusout': {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						},
						'attr': {
							'name': 'value',
							'value': 'This is a required field'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-checkbox-validation-settings .required-message .nino-color-box',
						'destination': '#' + id + ' .nino-error-message',
						'css': {
							'name': 'color',
							'value': '545454'
						},
						'events' : {
							'onShow' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'onHide' : {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						}
					}
				}
			},
		}
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};

/**
 * Init Radio Setting
 */
initRadioSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'label' : {
			//label-text
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-radio-label-settings .label-text input[name="label-text"]',
						'destination' : '#' + id + ' label .nino-labelName',
						'attr': {
							'name': 'value',
							'value': 'Radio Box'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-radio-label-settings .label-text .nino-color-box',
						'destination': '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//sub-text
			'sub-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-radio-label-settings .sub-text input[name="sub-text"]',
						'destination' : '#' + id + ' label .nino-subLabel',
						'attr': {
							'name': 'value',
							'value': 'Lorem ipsum dolor sit amet, consectetur'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-radio-label-settings .sub-text .nino-color-box',
						'destination': '#' + id + ' label .nino-subLabel',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//label-icon
			'label-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-radio-label-settings .label-icon .nino-font-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'class' : {
							'value': ''
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-radio-label-settings .label-icon .nino-color-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-radio-label-settings .fonts select',
						'destination' : '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-radio-label-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' label .nino-labelName',
						'amount': '#' + id + '-element-settings .nino-radio-label-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		},
		'input' : {
			//list-of-choice
			'list-of-choice' : {
				'type' : 'list-options',
				'settings' : {
					'list' : {
						'source' : '#' + id + '-element-settings .nino-radio-input-settings .nino-formGroup ul.options-destination',
						'source-clone' : '#' + id + '-element-settings .nino-radio-input-settings .nino-formGroup ul.options-source-clone li.type-radio',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style',
						'add-clone': '#' + id + '-element-settings .nino-radio-input-settings .nino-formGroup .nino-addMoreChoice',
						'type' : 'radio',
						'options' : {
							'radio1' : {
								'name' : 'radio1',
								'value' : 'value1'
							},
							'radio2' : {
								'name' : 'radio2',
								'value' : 'value2'
							},
						},
						'order' : ['radio2', 'radio1'],
						'default' : ['radio2']
					}
				}
			},
			
			//input-text-color
			'input-text-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-radio-input-settings .input-text-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup ul.nino-input-style',
						'display' : '#' + id + '-element-settings .nino-radio-input-settings .input-text-color .nino-input-color-display',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//styles
			'styles': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-radio-input-settings .styles select',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style',
						'class': {
							'group': 'style-*',
							'value' : 'style-1',
						}
					}
				}
			},
			
			//display
			'display' : {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-radio-input-settings .display .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style',
						'class': {
							'group': 'display-*',
							'value' : 'style-1',
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-radio-input-settings .fonts select',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style label',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-radio-input-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup ul.nino-input-style label',
						'amount': '#' + id + '-element-settings .nino-radio-input-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
		},
		'validation' : {
			//required
			'required': {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-radio-validation-settings .required .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup',
						'options' : {
							'no' : {
								'removeClass' : 'nino-required'
							},
							'yes' : {
								'addClass' : 'nino-required'
							},
							'value' : 'yes',
						},
						'class' : {
							'value': 'nino-required',
						},
					}
				}
			},
			
			//required-message
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-radio-validation-settings .required-message input',
						'destination' : '#' + id + ' .nino-error-message',
						'events' : {
							'focusin' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'focusout': {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						},
						'attr': {
							'name': 'value',
							'value': 'This is a required field'
						}
						
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-radio-validation-settings .required-message .nino-color-box',
						'destination': '#' + id + ' .nino-error-message',
						'css': {
							'name': 'color',
							'value': '545454'
						},
						'events' : {
							'onShow' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'onHide' : {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						}
					}
				}
			},
		}
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};


initCaptchaSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'label' : {
			//captcha-horizontal
			'horizontal' : {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-captcha-label-settings .horizontal .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup',
						'options' : {
							'no' : {
								'removeClass' : 'nino-horizontal',
							},
							'yes' : {
								'addClass' : 'nino-horizontal',
							},
							'value' : 'yes',
						},
						'class' : {
							'value': 'nino-horizontal',
						}
					}
				}
			},
			//label-text
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-captcha-label-settings .label-text input[name="label-text"]',
						'destination' : '#' + id + ' label .nino-labelName',
						'attr': {
							'name': 'value',
							'value': 'Captcha'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-label-settings .label-text .nino-color-box',
						'destination': '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//sub-text
			'sub-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-captcha-label-settings .sub-text input[name="sub-text"]',
						'destination' : '#' + id + ' label .nino-subLabel',
						'attr': {
							'name': 'value',
							'value': 'Lorem ipsum dolor sit amet, consectetur'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-label-settings .sub-text .nino-color-box',
						'destination': '#' + id + ' label .nino-subLabel',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//label-icon
			'label-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-captcha-label-settings .label-icon .nino-font-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'class' : {
							'value': 'icon-user'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-label-settings .label-icon .nino-color-box',
						'destination': '#' + id + ' .nino-labelName .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-captcha-label-settings .fonts select',
						'destination' : '#' + id + ' label .nino-labelName',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-captcha-label-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' label .nino-labelName',
						'amount': '#' + id + '-element-settings .nino-captcha-label-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		},
		
		'input' : {
			
			//placeholder
			'placeholder': {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .placeholder input[name="placeholder"]',
						'destination' : '#' + id + ' .nino-input input',
						'attr': {
							'name': 'placeholder',
							'value': 'Placeholder'
						}
					}
				}
			},
			
			//input-value
			'input-value': {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .input-value input[name="input-value"]',
						'destination' : '#' + id + ' .nino-input input',
						'attr': {
							'name': 'value',
							'value': 'Placeholder'
						}
					}
				}
			},
			
			//input-text-color
			'input-text-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .input-text-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup input',
						'display' : '#' + id + '-element-settings .nino-captcha-input-settings .input-text-color .nino-input-color-display',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//input-background-color
			'input-background-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .input-background-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup input',
						'display' : '#' + id + '-element-settings .nino-captcha-input-settings .input-background-color .nino-input-color-display',
						'css': {
							'name': 'background-color',
							'value': 'ffffff'
						}
					}
				}
			},
			
			//border-color
			'border-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .border-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup input',
						'display' : '#' + id + '-element-settings .nino-captcha-input-settings .border-color .nino-input-color-display',
						'css': {
							'name': 'border-color',
							'value': '545454'
						}
					}
				}
			},
			
			//border-width
			'border-width': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .border-width .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup input',
						'amount': '#' + id + '-element-settings .nino-captcha-input-settings .border-width .nino-amount',
						'min' : 1,
						'max' : 5,
						'css': {
							'name': 'border-width',
							'value': 1
						}
					}
				}
			},
			
			//border-radius
			'border-radius': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .border-radius .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup input',
						'amount': '#' + id + '-element-settings .nino-captcha-input-settings .border-radius .nino-amount',
						'min' : 1,
						'max' : 20,
						'css': {
							'name': 'border-radius',
							'value': 0
						}
					}
				}
			},
			
			//input-icon
			'input-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .input-icon .nino-font-box',
						'destination': '#' + id + ' .nino-input .nino-icon',
						'class' : {
							'value': 'icon-user'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .input-icon .nino-color-box',
						'destination': '#' + id + ' .nino-input .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//icon-position
			'icon-position': {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-captcha-input-settings .icon-position .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup',
						'class': {
							'group': 'nino-icon-*',
							'value': ''
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .fonts select',
						'destination' : '#' + id + ' .nino-formGroup input',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size' : {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup input',
						'amount': '#' + id + '-element-settings .nino-captcha-input-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 12
						}
					}
				}
			},
			
			//refresh-icon
			'refresh-icon' : {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .refresh-icon .nino-font-box',
						'destination': '#' + id + ' .nino-input .nino-captcha-refresh',
						'class' : {
							'value': ''
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-input-settings .refresh-icon .nino-color-box',
						'destination': '#' + id + ' .nino-input .nino-captcha-refresh',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			}
		},
		
		
		'validation' : {
			
			//required-message
			'label-text': {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-captcha-validation-settings .required-message input',
						'destination' : '#' + id + ' .nino-error-message',
						'events' : {
							'focusin' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'focusout': {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						},
						'attr': {
							'name': 'value',
							'value': 'This is a required field'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-captcha-validation-settings .required-message .nino-color-box',
						'destination': '#' + id + ' .nino-error-message',
						'css': {
							'name': 'color',
							'value': '545454'
						},
						'events' : {
							'onShow' : {
								'destination': '#' + id + ' .nino-formGroup',
								'addClass' : 'nino-error'
							},
							'onHide' : {
								'destination': '#' + id + ' .nino-formGroup',
								'removeClass' : 'nino-error'
							}
						}
					}
				}
			},
		}
	};

	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};

initSubmitSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'submit' : {
			//text
			'text' : {
				'type' : 'submit-text',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-submit-settings .submit-text input[name="submit-text"]',
						'destination' : '#' + id + ' .nino-formGroup button',
						'attr': {
							'name': 'value',
							'value': 'Submit Text'
						}
					},
				}
			},
			
			//input-text-color
			'input-text-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-submit-settings .input-text-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup button',
						'display' : '#' + id + '-element-settings .nino-submit-settings .input-text-color .nino-input-color-display',
						'css': {
							'name': 'color',
							'value': 'ffffff'
						}
					}
				}
			},
			
			//input-background-color
			'input-background-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-submit-settings .input-background-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup button',
						'display' : '#' + id + '-element-settings .nino-submit-settings .input-background-color .nino-input-color-display',
						'css': {
							'name': 'background-color',
							'value': '2da5da'
						}
					}
				}
			},
			
			//border-color
			'border-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-submit-settings .border-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup button',
						'display' : '#' + id + '-element-settings .nino-submit-settings .border-color .nino-input-color-display',
						'css': {
							'name': 'border-color',
							'value': '2da5da'
						}
					}
				}
			},
			
			//border-width
			'border-width': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-submit-settings .border-width .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup button',
						'amount': '#' + id + '-element-settings .nino-submit-settings .border-width .nino-amount',
						'min' : 1,
						'max' : 5,
						'css': {
							'name': 'border-width',
							'value': 1
						}
					}
				}
			},
			
			//border-radius
			'border-radius': {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-submit-settings .border-radius .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup button',
						'amount': '#' + id + '-element-settings .nino-submit-settings .border-radius .nino-amount',
						'min' : 1,
						'max' : 20,
						'css': {
							'name': 'border-radius',
							'value': 0
						}
					}
				}
			},
			
			
			//input-icon
			'input-icon': {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-submit-settings .input-icon .nino-font-box',
						'destination': '#' + id + ' button .nino-icon',
						'class' : {
							'value': 'icon-export'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-submit-settings .input-icon .nino-color-box',
						'destination': '#' + id + ' button .nino-icon',
						'css': {
							'name': 'color',
							'value': 'ffffff'
						}
					}
				}
			},
			
			//icon-size
			'icon-size' : {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-submit-settings .icon-size .nino-slider-range-max',
						'destination' : '#' + id + ' button .nino-icon',
						'amount': '#' + id + '-element-settings .nino-submit-settings .icon-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
			//width
			'width' : {
				'type' : 'text',
				'settings': {
					'text': {
						'source': '#' + id + '-element-settings .nino-submit-settings .width input[name="width"]',
						'destination' : '#' + id + ' .nino-formGroup button',
						'css': {
							'name': 'width',
							'value': 146
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-submit-settings .fonts select',
						'destination' : '#' + id + ' .nino-formGroup button',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size' : {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-submit-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup button',
						'amount': '#' + id + '-element-settings .nino-submit-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		}
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};

initParagraphSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'text' : {
			//text-content
			'text-content' : {
				'type' : 'text-content',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-paragraph-text-settings .text-content textarea',
						'destination' : '#' + id + ' .nino-formGroup .nino-paragraph',
						'attr': {
							'name': 'value',
							'value': 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book'
						}
					},
				}
			},
			
			//input-text-color
			'input-text-color' : {
				'type' : 'color',
				'settings': {
					'color': {
						'source': '#' + id + '-element-settings .nino-paragraph-text-settings .input-text-color .nino-input-color-box',
						'destination': '#' + id + ' .nino-formGroup .nino-paragraph',
						'display' : '#' + id + '-element-settings .nino-paragraph-text-settings .input-text-color .nino-input-color-display',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//alignment
			'alignment' : {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-paragraph-text-settings .alignment .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup .nino-paragraph',
						'css': {
							'name': 'text-align',
							'value': 'left'
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-paragraph-text-settings .fonts select',
						'destination' : '#' + id + ' .nino-formGroup .nino-paragraph',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size' : {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-paragraph-text-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-formGroup .nino-paragraph',
						'amount': '#' + id + '-element-settings .nino-paragraph-text-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		}
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};

initSocialSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'social-link' : {
			//list-social
			'list-social' : {
				'type' : 'social-link',
				'settings' : {
					'list' : {
						'source' : '#' + id + '-element-settings .nino-social-link-settings .nino-formGroup ul.social-destination',
						'source-clone' : '#' + id + '-element-settings .nino-social-link-settings .nino-formGroup ul.social-source-clone li.type-social',
						'destination' : '#' + id + ' .nino-formGroup .nino-social-link',
						'add-clone': '#' + id + '-element-settings .nino-social-link-settings .nino-formGroup .nino-addMoreChoice',
						'socials' : {
							'facebook' : {
								'icon-color' : {
									'icon' : 'icon-mail-alt',
									'color' : '000000'
								},
								'font-size' : 30,
								'link-url' : '',
							},
							'google-plus' : {
								'icon-color' : {
									'icon' : 'icon-help-circled',
									'color' : '000000'
								},
								'font-size' : 30,
								'link-url' : '',
							},
						},
						'order' : ['facebook', 'google-plus'],
					}
				}
			}
		},
		'style' : {
			
			//horizontal
			'horizontal' : {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-social-style-settings .horizontal .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup .nino-social-link',
						'options' : {
							'no' : {
								'removeClass' : 'nino-horizontal',
							},
							'yes' : {
								'addClass' : 'nino-horizontal',
							},
							'value' : 'yes',
						},
						'class' : {
							'value': 'nino-horizontal',
						
						}
					}
				}
			},
			
			//alignment
			'alignment' : {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-social-style-settings .alignment .radioHidden label',
						'destination' : '#' + id + ' .nino-formGroup .nino-social-link',
						'css': {
							'name': 'text-align',
							'value': 'left'
						}
					}
				}
			},
			
			
		}
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
}; 

initHeadingSettings = function (id) {
	renderColorBox();
	
	var settings = {
		'text' : {
			
			//heading-text
			'heading-text' : {
				'type' : 'text-color',
				'settings': {
					'text': {
						'source' : '#' + id + '-element-settings .nino-heading-text-settings .heading-text input[name="heading-text"]',
						'destination' : '#' + id + ' .nino-heading',
						'attr': {
							'name': 'value',
							'value': 'Heading Text'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-heading-text-settings .heading-text .nino-color-box',
						'destination' : '#' + id + ' .nino-heading',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//alignment
			'alignment' : {
				'type' : 'radio-option',
				'settings': {
					'radio' : {
						'source' : '#' + id + '-element-settings .nino-heading-text-settings .alignment .radioHidden label',
						'destination' : '#' + id + ' .nino-heading',
						'css': {
							'name': 'text-align',
							'value': 'left'
						}
					}
				}
			},
			
			//heading-icon
			'heading-icon' : {
				'type' : 'icon-color',
				'settings': {
					'icon' : {
						'source': '#' + id + '-element-settings .nino-heading-text-settings .heading-icon .nino-font-box',
						'destination': '#' + id + ' .nino-heading .nino-icon',
						'class' : {
							'value': 'icon-home'
						}
					},
					'color': {
						'source': '#' + id + '-element-settings .nino-heading-text-settings .heading-icon .nino-color-box',
						'destination': '#' + id + ' .nino-heading .nino-icon',
						'css': {
							'name': 'color',
							'value': '545454'
						}
					}
				}
			},
			
			//icon-size
			'icon-size' : {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-heading-text-settings .icon-size .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-heading .nino-icon',
						'amount': '#' + id + '-element-settings .nino-heading-text-settings .icon-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
			//fonts
			'fonts': {
				'type' : 'select',
				'settings': {
					'select': {
						'source': '#' + id + '-element-settings .nino-heading-text-settings .fonts select',
						'destination' : '#' + id + ' .nino-heading',
						'css': {
							'name': 'font-family',
							'value': 'Helvetica,Arial,sans-serif'
						}
					}
				}
			},
			
			//font-size
			'font-size' : {
				'type' : 'slider',
				'settings': {
					'slider': {
						'source': '#' + id + '-element-settings .nino-heading-text-settings .font-size .nino-slider-range-max',
						'destination' : '#' + id + ' .nino-heading',
						'amount': '#' + id + '-element-settings .nino-heading-text-settings .font-size .nino-amount',
						'min' : 1,
						'max' : 30,
						'css': {
							'name': 'font-size',
							'value': 14
						}
					}
				}
			},
			
		}
	};
	
	if (!jQuery.isEmptyObject(valElementSettings[id])) {
		// Merge object2 into object1, recursively
		valElementSettings[id] = jQuery.extend( true, settings, valElementSettings[id] );
	} else {
		valElementSettings[id] = jQuery.extend(true, {}, settings);
	}
	
	setupElementSetting(valElementSettings[id]);
};
/** =============================================================================================================================================================================== 
 * Setup Element Settings
 * =============================================================================================================================================================================== */
setupElementSetting = function (settings) {
	
	if (!jQuery.isEmptyObject(settings)) {
		jQuery.each(settings, function (keyGroup, elements) {
			if (!jQuery.isEmptyObject(elements)) {
				jQuery.each(elements, function (key, element) {
					switch (element['type']) {
						case 'text-color':
							setupTextColor(element['settings']);
							break;
						
						case 'color':
							setupColor(element['settings']);
							break;
						
						case 'icon-color':
							setupIconColor(element['settings']);
							break;
						
						case 'radio-option':
							setupRadio(element['settings']);
							break;
						
						case 'select':
							setupSelect(element['settings']);
							break;
							
						case 'slider':
							setupSlider(element['settings']);
							break;
							
						case 'text':
							setupText(element['settings']);
							break;
							
						case 'list-options':
							setupListOption(element['settings']);
							break;
						
						case 'submit-text':
							setupSubmitText(element['settings']);
							break;
						
						case 'text-content':
							setupTextContent(element['settings']);
							break;
						
						case 'social-link':
							setupSocialLink(element['settings']);
							break;
							
						default:
							alert(element['type']);
							break;
					}
				});
			}
		});
	}
};

/** =============================================================================================================================================================================== 
 * Basic level Element Settings
 * =============================================================================================================================================================================== */
setupTextColor = function (settings) {
	lowest_level_text_setting(settings);
	lowest_level_color_setting(settings);
};

setupColor = function (settings) {
	lowest_level_color_setting(settings);
};

setupIconColor = function (settings) {
	lowest_level_icon_setting(settings);
	lowest_level_color_setting(settings);
};

setupSelect = function (settings) {
	lowest_level_select_setting(settings);
};

setupSlider = function (settings) {
	lowest_level_slider_setting(settings);
};

setupText = function (settings) {
	lowest_level_text_attr_setting(settings);
};

setupRadio = function (settings) {
	lowest_level_radio_setting(settings);
};

setupListOption = function (settings) {
	lowest_level_list_option_setting(settings);
};

setupSubmitText = function (settings) {
	lowest_level_text_setting(settings);
};

setupTextContent = function (settings) {
	lowest_level_text_content_setting(settings);
};

setupSocialLink = function (settings) {
	lowest_level_social_link(settings);
};
/** =============================================================================================================================================================================== 
 * Lowest level Element Settings
 * =============================================================================================================================================================================== */
lowest_level_text_setting = function (settings) {
	
	if (!jQuery.isEmptyObject(settings['text'])) {
		var obj = jQuery(settings['text']['source']);
		var labelObj = jQuery(settings['text']['destination']);
		
		/***** Set default value *****/
		var oldValue = jQuery.trim(labelObj.justtext());
		if (!jQuery.isEmptyObject(settings['text']['attr'])) {
			obj.val(settings['text']['attr']['value']);
			//Set value
			labelObj.html(labelObj.html().replace(oldValue, settings['text']['attr']['value']));
		}
		
		/***** Set Event *****/
		//Delete all event keyup before
		obj.unbind("keyup");
		//Set new event
		obj.keyup(function () {
			var value = jQuery(this).val();
			//Set value
			oldValue = jQuery.trim(labelObj.justtext());
			labelObj.html(labelObj.html().replace(oldValue, value));
			settings['text']['attr']['value'] = value;
		});
		
		if (!jQuery.isEmptyObject(settings['text']['events'])) {
			var objEvents = settings['text']['events'];
			if (typeof objEvents['focusin'] !== undefined 
					&& typeof objEvents['focusin']['addClass'] !== undefined) {
				obj.unbind("focusin");
				obj.focusin(function () {
					jQuery(objEvents['focusin']['destination']).addClass(objEvents['focusin']['addClass']);
				});
			}
			
			if (typeof objEvents['focusout'] !== undefined 
					&& typeof objEvents['focusout']['removeClass'] !== undefined) {
				obj.unbind("focusout");
				obj.focusout(function () {
					jQuery(objEvents['focusout']['destination']).removeClass(objEvents['focusout']['removeClass']);
				});
			}
		}
	}
};

/**================================= lowest_level_text_content_setting =================================**/
lowest_level_text_content_setting = function (settings) {
	if (!jQuery.isEmptyObject(settings['text'])) {
		var objSource = jQuery(settings['text']['source']);
		var labelObj = jQuery(settings['text']['destination']);
		/***** Set default value *****/
		objSource.val(settings['text']['attr']['value']);
		labelObj.html(settings['text']['attr']['value']);
		
		/***** Set Event *****/
		//Remove old event
		objSource.unbind("keyup");
		
		objSource.keyup(function () {
			var value = jQuery(this).val();
			//Set value
			labelObj.html(value);
		});
	}
};

/**================================= lowest_level_color_setting =================================**/
lowest_level_color_setting = function (settings) {
	if (!jQuery.isEmptyObject(settings['color'])) {
		/***** Set default value *****/
		if (!jQuery.isEmptyObject(settings['color']['display'])) {
			jQuery(settings['color']['source']).val(settings['color']['css']['value']);
			jQuery(settings['color']['display']).css('background-color','#'+settings['color']['css']['value']);
		} else {
			jQuery(settings['color']['source']).css('background-color','#'+settings['color']['css']['value']);
		}
		
		jQuery(settings['color']['destination']).css(settings['color']['css']['name'],'#'+settings['color']['css']['value']);
		
		
		/***** Set Event *****/
		var options = {
			layout:'hex',
			color:settings['color']['css']['value'],
			submit:0,
			colorScheme:'light',
			onChange:function(hsb,hex,rgb,el,bySetColor) {
				if (!jQuery.isEmptyObject(settings['color']['display'])) {
					jQuery(settings['color']['display']).css('background-color','#'+hex);
				} else {
					jQuery(el).css('background-color','#'+hex);
				}
				
				jQuery(settings['color']['destination']).css(settings['color']['css']['name'],'#'+hex);
				
				//Set value
				settings['color']['css']['value'] = hex;
				// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
				if(!bySetColor) jQuery(el).val(hex);
				
			}	
		};
		
		if (!jQuery.isEmptyObject(settings['color']['events'])) {
			var objEvents = settings['color']['events'];
			if (typeof objEvents['onShow'] !== undefined 
					&& typeof objEvents['onShow']['addClass'] !== undefined) {
				options.onShow = function () {
					jQuery(objEvents['onShow']['destination']).addClass(objEvents['onShow']['addClass']);
				};
			}
			
			if (typeof objEvents['onHide'] !== undefined 
					&& typeof objEvents['onHide']['removeClass'] !== undefined) {
				options.onHide = function () {
					jQuery(objEvents['onHide']['destination']).removeClass(objEvents['onHide']['removeClass']);
				};
			}
		}
		
		//Set event colpick
		jQuery(settings['color']['source']).colpick(options)
		.keyup(function(){
			jQuery(this).colpickSetColor(this.value);
		});
	}
};

/**================================= lowest_level_icon_setting =================================**/
lowest_level_icon_setting = function (settings) {
	if (!jQuery.isEmptyObject(settings['icon'])) {
		
		/***** Set Event *****/
		// font picker
		var fnt_icons_categorized = {
			    'Web Application Icons' : ["icon-mail", "icon-mail-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all"],
			    'Form Control Icons' : ["icon-search", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-quote-right", "icon-code", "icon-comment-empty", "icon-chat-empty"],
			    'Media Icons' : ["icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print"],
			    'Popular Icons' : ["icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-forward", "icon-quote-left", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat"],
			    'Others' : ["icon-music", "icon-help", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-bell", "icon-bell-alt"]
		};
		var objSource = jQuery(settings['icon']['source']);
		
		objSource.unbind("change");
		objSource.fontIconPicker({
			source: fnt_icons_categorized
	    })
	    .on('change', function() {
	    	var selectedIcon = jQuery(this).val();
	    	jQuery(settings['icon']['destination']).alterClass("icon-*", selectedIcon);
	    	settings['icon']['class']['value'] = selectedIcon;
	    }); // Load with default options
		
		/***** Set default value *****/
		jQuery(settings['icon']['destination']).alterClass("icon-*", settings['icon']['class']['value']);
	}
};

/**================================= lowest_level_select_setting =================================**/
lowest_level_select_setting = function (settings) {
	if (!jQuery.isEmptyObject(settings['select'])) {
		var objSource = jQuery(settings['select']['source']);
		
		/***** Set default value *****/
		if (!jQuery.isEmptyObject(settings['select']['css'])) {
			objSource.val(settings['select']['css']['value']);
			jQuery(settings['select']['destination']).css(settings['select']['css']['name'], settings['select']['css']['value']);
		} else if (!jQuery.isEmptyObject(settings['select']['class'])) {
			objSource.val(settings['select']['class']['value']);
			jQuery(settings['select']['destination']).alterClass(settings['select']['class']['group'], settings['select']['class']['value']);
		}
		
		/***** Set Event *****/
		objSource.unbind("change");
		objSource.change(function () {
			var value = jQuery(this).val();
			if (!jQuery.isEmptyObject(settings['select']['css'])) {
				jQuery(settings['select']['destination']).css(settings['select']['css']['name'], value);
				settings['select']['css']['value'] = value;
			} else if (!jQuery.isEmptyObject(settings['select']['class'])) {
				jQuery(settings['select']['destination']).alterClass(settings['select']['class']['group'], value);
				settings['select']['class']['value'] = value;
			}
		});
	}
};

/**================================= lowest_level_slider_setting =================================**/
lowest_level_slider_setting = function (settings) {
	if (!jQuery.isEmptyObject(settings['slider'])) {
		/***** Set default value *****/
		jQuery(settings['slider']['amount']).val(settings['slider']['css']['value']);
		jQuery(settings['slider']['destination']).css(settings['slider']['css']['name'], settings['slider']['css']['value']);
		
		/***** Set Event *****/
		var objSource = jQuery(settings['slider']['source']);
		objSource.unbind("change");
		objSource.change(function () {
			var value = jQuery(this).val();
			jQuery(settings['slider']['destination']).css(settings['slider']['css']['name'], value);
			settings['slider']['css']['value'] = value;
		});
		
		jQuery(settings['slider']['source']).slider({
			range: "max",
			min: settings['slider']['min'],
			max: settings['slider']['max'],
			value: settings['slider']['css']['value'],
			slide: function(event, ui) {
				jQuery(settings['slider']['amount']).val(ui.value);
				jQuery(settings['slider']['destination']).css(settings['slider']['css']['name'], ui.value);
				settings['slider']['css']['value'] = ui.value;
			}
		});
	}
};

/**================================= lowest_level_text_attr_setting =================================**/
lowest_level_text_attr_setting = function (settings) {
	if (!jQuery.isEmptyObject(settings['text'])) {
		/***** Set default value *****/
		if (!jQuery.isEmptyObject(settings['text']['attr'])) {
			var value = settings['text']['attr']['value'];
			set_value_text_attr_setting(value, settings, true);
		} else if (!jQuery.isEmptyObject(settings['text']['css'])) {
			var value = settings['text']['css']['value'];
			set_value_text_attr_setting(value, settings, true);
		}
		
		/***** Set Event *****/
		var objSource = jQuery(settings['text']['source']);
		objSource.unbind("keyup");
		objSource.keyup(function () {
			var value = jQuery(this).val();
			set_value_text_attr_setting(value, settings, false);
		});
	}
};

set_value_text_attr_setting = function (value, settings, isDefault) {
	var objSource = jQuery(settings['text']['source']);
	if (isDefault) {
		objSource.val(value);
	}
	
	if (!jQuery.isEmptyObject(settings['text']['attr'])) {
		jQuery(settings['text']['destination']).attr(settings['text']['attr']['name'], value);
		
		if (!isDefault) {
			settings['text']['attr']['value'] = value;
		}
	} else if (!jQuery.isEmptyObject(settings['text']['css'])) {
		jQuery(settings['text']['destination']).css(settings['text']['css']['name'], value);
		
		if (!isDefault) {
			settings['text']['css']['value'] = value;
		}
	}
};

/**================================= lowest_level_radio_setting =================================**/
lowest_level_radio_setting = function (settings) {
	if (!jQuery.isEmptyObject(settings['radio'])) {
		
		/***** Set default value *****/
		if (!jQuery.isEmptyObject(settings['radio']['options'])) {
			var value = settings['radio']['options']['value'];
			set_value_radio_setting(value, settings, true);
		}
		else if (!jQuery.isEmptyObject(settings['radio']['class'])) {
			var value = settings['radio']['class']['value'];
			set_value_radio_setting(value, settings, true);
		}
		else if (!jQuery.isEmptyObject(settings['radio']['css'])) {
			var value = settings['radio']['css']['value'];
			set_value_radio_setting(value, settings, true);
		}
		
		
		/***** Set Event *****/
		var objSource = jQuery(settings['radio']['source']);
		objSource.unbind("click");
		objSource.click(function () {
			var obj = jQuery(this).parent().find("input");
			var value = obj.val();
			
			set_value_radio_setting(value, settings, false);
					
		});
	}
};

set_value_radio_setting = function(value, settings, isDefault) {
	var objSource = jQuery(settings['radio']['source']);
	if (isDefault == true) {
		objSource.val(value);
	}
	
	if (!jQuery.isEmptyObject(settings['radio']['options'])) {
		if (!jQuery.isEmptyObject(settings['radio']['options'][value]['removeClass'])) {
			jQuery(settings['radio']['destination']).removeClass(settings['radio']['options'][value]['removeClass']);
		}
		
		if (!jQuery.isEmptyObject(settings['radio']['options'][value]['addClass'])) {
			jQuery(settings['radio']['destination']).addClass(settings['radio']['options'][value]['addClass']);
			settings['radio']['class']['value'] = settings['radio']['options'][value]['addClass'];
		}
		
		if (!isDefault) {
			settings['radio']['options']['value'] = value;
		}
	}
	else if (!jQuery.isEmptyObject(settings['radio']['class'])) {
		jQuery(settings['radio']['destination']).alterClass(settings['radio']['class']['group'], settings['radio']['class']['value']);
		
		if (!isDefault) {
			settings['radio']['class']['value'] = value;
		}
	}
	else if (!jQuery.isEmptyObject(settings['radio']['css'])) {
		jQuery(settings['radio']['destination']).css(settings['radio']['css']['name'], settings['radio']['css']['value']);
		
		if (!isDefault) {
			settings['radio']['css']['value'] = value;
		}
	}
};

/**================================= lowest_level_list_option_setting =================================**/
lowest_level_list_option_setting = function (settings) {
	if (!jQuery.isEmptyObject(settings['list'])) {
		/***** Set default value *****/
		//Remove all item option
		jQuery(settings['list']['source'] + " li").remove();
		
		//Set default value
		if (!jQuery.isEmptyObject(settings['list']['options'])) {
			jQuery.each(settings['list']['order'], function (index, id) {
				create_item_option_setting(id, settings);
				
				var option = settings['list']['options'][id];
				
				//Set name and value to input attribute
				jQuery("#option-"+id + " input[name='name']").val(option['name']);
				jQuery("#option-"+id + " input[name='value']").val(option['value']);
				
				//Set option text and value
				if (settings['list']['type'] == 'select') {
					jQuery(settings['list']['destination'] + " option."+id).html(option['name']);
					jQuery(settings['list']['destination'] + " option."+id).attr('value', option['value']);
				} else {
					jQuery(settings['list']['destination'] + " ."+id).find("label").html(option['name']);
					jQuery(settings['list']['destination'] + " ."+id).find("input").val(option['value']);
				}
			});
			
			//Set default
			if (!jQuery.isEmptyObject(settings['list']['default'])) {
				jQuery.each(settings['list']['default'], function (index, id) {
					jQuery("#option-"+id + " input[id='"+id+"']").attr("checked", "checked");
					
					if (settings['list']['type'] == 'select') {						
						jQuery(settings['list']['destination'] + " option").removeAttr("selected");
						jQuery(settings['list']['destination'] + " option."+id).attr("selected", "selected");
					} else {
						var objCheckbox = jQuery(this).parentsUntil("li").parent().find("input");
						jQuery(settings['list']['destination']  + " ." + id + " input").attr("checked", !objCheckbox.is(":checked"));
					}
				});
			}
		}
		
		/***** Set Event *****/
		//Set sortabled options
		jQuery(settings['list']['source']).sortable({
			handle: ".fa-arrows",
			update: function (event, ui) {
				//Resort options
				resortOptions(settings);
				
				//render selectbox
				renderSelectBox(settings);
			}
		});
		
		renderSelectBox(settings);
		
		//Set event add clone
		jQuery(settings['list']['add-clone']).unbind();
		jQuery(settings['list']['add-clone']).click(function () {
			var id = getIdUnique();
			
			create_item_option_setting(id, settings);
			
			//Resort options
			resortOptions(settings);
			
			//render selectbox
			renderSelectBox(settings);
			
			return false;
		});
	}
};

create_item_option_setting = function (id, settings) {
	var objClone = jQuery(settings['list']['source-clone']).clone(true);
	objClone = jQuery(objClone.wrap('<li></li>').parent().html().replace(/__id__/gi, id));
	
	//Set event remove
	objClone.find(".nino-listOfChoiceAction .fa-close").click(function () {
		delete settings['list']['options'][id];
		jQuery(this).parentsUntil("li").parent().remove();
		
		resortOptions(settings);
		renderSelectBox(settings);
		return false;
	});
	
	//Set default option
	objClone.find(".nino-listOfChoiceAction .nino-input-style label").click(function () {
		var itemId = jQuery(this).parentsUntil("li").parent().attr("id");
		if (settings['list']['type'] == 'select') {
			settings['list']['default'] = [id];
			jQuery(settings['list']['destination'] + " option").removeAttr("selected");
			jQuery(settings['list']['destination'] + " option."+itemId).attr("selected", "selected");
		} else {
			var objCheckbox = jQuery(this).parentsUntil("li").parent().find("input");
			jQuery(settings['list']['destination']  + " ." + itemId + " input").attr("checked", !objCheckbox.is(":checked"));
			
			if (jQuery.inArray(settings['list']['type'], ['checkbox']) !== -1) {
				if (objCheckbox.is(":checked")) {
					//Remove from default list
					settings['list']['default'].splice(jQuery.inArray(id, settings['list']['default']),1);
				} else {
					settings['list']['default'].push(id);
				}
			} else {
				settings['list']['default'] = [id];
			}
		}
		
		
	});
	
	//Set trigger name
	objClone.find("input[name='name']").keyup(function () {
		var itemId = jQuery(this).parentsUntil("li").parent().attr("id");
		var value = jQuery(this).val();
		if (settings['list']['type'] == 'select') {
			jQuery(settings['list']['destination'] + " option."+itemId).html(value);
		} else {
			jQuery(settings['list']['destination'] + " ."+itemId).find("label").html(value);
		}
		
		settings['list']['options'][id]['name'] = value;
	});
	
	//Set trigger value
	objClone.find("input[name='value']").keyup(function () {
		var itemId = jQuery(this).parentsUntil("li").parent().attr("id");
		var value = jQuery(this).val();
		if (settings['list']['type'] == 'select') {
			jQuery(settings['list']['destination'] + " option."+itemId).attr('value', value);
		} else {
			jQuery(settings['list']['destination'] + " ."+itemId).find("input").val(value);
		}
		
		settings['list']['options'][id]['value'] = value;
	});
	
	if (jQuery.isEmptyObject(settings['list']['options'])) {
		settings['list']['options'] = {};
	}
	
	if (jQuery.isEmptyObject(settings['list']['order'])) {
		settings['list']['order'] = [];
	}
	
	if (jQuery.isEmptyObject(settings['list']['default'])) {
		settings['list']['default'] = [];
	}
	
	if (jQuery.isEmptyObject(settings['list']['options'][id])) {
		settings['list']['options'][id] = {
			'name': '',
			'value': '',
		};
	}
	
	objClone.appendTo(settings['list']['source']);
};

resortOptions = function (settings) {
	var newOrder = [];
	jQuery(settings['list']['source'] + " li").each(function (index) {
		var id = jQuery(this).attr("id").replace(/option-/g, '');
		newOrder.push(id);
	});
	
	// Merge object2 into object1, recursively
	settings['list']['order'] = newOrder;
};

/**================================= lowest_level_social_link =================================**/
lowest_level_social_link = function (settings) {
	if (!jQuery.isEmptyObject(settings['list'])) {
		/***** Set default value *****/
		//Add social property
		jQuery(settings['list']['source'] + " li").remove();
		jQuery.each(settings['list']['order'], function (index, id) {
			create_item_social_setting(id, settings);
		});
		
		renderSocialLink(settings);
		
		//Set default value
		jQuery.each(settings['list']['order'], function (index, id) {
			var social = settings['list']['socials'][id];
			jQuery(settings['list']['destination']+" .social-"+id).alterClass("icon-*", social['icon-color']['icon']);
			jQuery(settings['list']['destination']+" .social-"+id).css('color','#'+social['icon-color']['color']);
			jQuery(settings['list']['destination']+" .social-"+id).css('font-size', social['font-size']);
			jQuery(settings['list']['destination']+" .social-"+id).attr("href", social['link-url']);
		});
		
		/***** Set Event add new socia *****/
		jQuery(settings['list']['add-clone']).click(function () {
			var id = getIdUnique();
			
			create_item_social_setting(id, settings);
			
			renderSocialLink(settings);
			return false;
		});
	}
};

create_item_social_setting = function (id, settings) {
	
	var objClone = jQuery(settings['list']['source-clone']).clone(true);
	objClone = jQuery(objClone.wrap('<li></li>').parent().html().replace(/__id__/gi, id));
	
	if (jQuery.isEmptyObject(settings['list']['socials'])) {
		settings['list']['socials'] = {};
	}
	
	if (jQuery.isEmptyObject(settings['list']['order'])) {
		settings['list']['order'] = [];
	}

	if (jQuery.isEmptyObject(settings['list']['socials'][id])) {
		settings['list']['socials'][id] = {
			'icon-color' : {
				'icon' : '',
				'color' : '000000'
			},
			'font-size' : 14,
			'link-url' : '',
		};
	}
	
	/**
	 * Set event remove
	 */
	
	var socialId = objClone.attr("id");
	var social = settings['list']['socials'][id];
	
	objClone.find(".nino-removeSocial").click(function () {
		
		jQuery(this).parents().find("#" + socialId).remove();
		
		renderSocialLink(settings);
		
		return false;
	});
	
	/**
	 * Set font picker
	 */
	var fnt_icons_categorized = {
		    'Web Application Icons' : ["icon-mail", "icon-mail-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all"],
		    'Form Control Icons' : ["icon-search", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-quote-right", "icon-code", "icon-comment-empty", "icon-chat-empty"],
		    'Media Icons' : ["icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print"],
		    'Popular Icons' : ["icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-forward", "icon-quote-left", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat"],
		    'Others' : ["icon-music", "icon-help", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-bell", "icon-bell-alt"]
	};
	
	objClone.find(".nino-input .nino-font-box").unbind("change");
	objClone.find(".nino-input .nino-font-box").fontIconPicker({
		source: fnt_icons_categorized
    })
    .on('change', function() {
    	var selectedIcon = jQuery(this).val();
    	jQuery(settings['list']['destination']+" ."+socialId).alterClass("icon-*", selectedIcon);
    	social['icon-color']['icon'] = selectedIcon;
    }); // Load with default options
	
	/**
	 * Set social colpick
	 */
	var options = {
		layout:'hex',
		color:social['icon-color']['color'],
		submit:0,
		colorScheme:'light',
		onChange:function(hsb,hex,rgb,el,bySetColor) {
			jQuery(el).css('background-color','#'+hex);
			jQuery(settings['list']['destination']+" ."+socialId).css('color','#'+hex);
			// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
			social['icon-color']['color'] = hex;
			if(!bySetColor) jQuery(el).val(hex);
		}	
	};
	
	//objClone.find(".nino-input .nino-color-box").unbind();
	objClone.find(".nino-input .nino-color-box").colpick(options)
	.keyup(function(){
		jQuery(this).colpickSetColor(this.value);
	});
	
	/**
	 * Set social size
	 */
	objClone.find(".nino-amount").val(social['font-size']);
	objClone.find(".nino-slider-range-max").change(function () {
		var value = jQuery(this).val();
		jQuery(settings['list']['destination']+" ."+socialId).css('font-size', value);
	});
	
	objClone.find(".nino-slider-range-max").slider({
		range: "max",
		min: 15,
		max: 45,
		value: social['font-size'],
		slide: function(event, ui) {
			objClone.find(".nino-amount").val(ui.value);
			jQuery(settings['list']['destination']+" ."+socialId).css('font-size', ui.value);
			social['font-size'] = ui.value;
		}
	});
	
	/**
	 * Set social link
	 */
	objClone.find(".nino-socialLinkUrl input").keyup(function () {
		var value = jQuery(this).val();
		jQuery(settings['list']['destination']+" ."+socialId).attr("href", value);
		// => dang lam do
	});
	
	//Append to source
	objClone.appendTo(settings['list']['source']);
};

/** =============================================================================================================================================================================== 
 * Other Function
 * =============================================================================================================================================================================== */
renderColorBox = function () {
	jQuery(".element-settings.nino-open .nino-input .nino-color-box").each(function (index, element) {
		var clss = jQuery(this).attr("class");
		var div = jQuery("<div class=\""+clss+"\"></div>");
		var parent = jQuery(this).parent();
		jQuery(this).remove();
		parent.append(div);
	});
};

renderSelectBox = function (settings) {
	if (settings['list']['type'] == 'select') {
		var destination = jQuery(settings['list']['destination']);
		destination.find("option").remove();
		
		jQuery(settings['list']['source'] + " li").each(function (index, element) {
			var id = jQuery(this).attr("id");
			var name = jQuery(this).find("input[name='name']").val();
			var value = jQuery(this).find("input[name='value']").val();
			var selected = jQuery(this).find("input[type='radio']").is(":checked") ? "selected=\"selected\"" : "";
			
			var option = jQuery("<option class=\""+id+"\" "+selected+"></option>");
			option.attr("value", value);
			option.html(name);
			
			destination.append(option);
		});
	} else if (settings['list']['type'] == 'checkbox' || settings['list']['type'] == 'radio') {
		var destination = jQuery(settings['list']['destination']);
		destination.find("li").remove();
		
		var inputId = getIdUnique();
		
		jQuery(settings['list']['source'] + " li").each(function (index, element) {
			var id = jQuery(this).attr("id");
			var name = jQuery(this).find("input[name='name']").val();
			var value = jQuery(this).find("input[name='value']").val();
			var strItem = '<li class='+id+'>';
			if (settings['list']['type'] == 'checkbox') {
				var checked = jQuery(this).find("input[type='checkbox']").is(":checked") ? "checked=\"checked\"" : "";
				strItem += '<input type="checkbox" value="'+value+'" name="checkbox-'+inputId+'" id="'+id+'" '+checked+'>';
			} else if (settings['list']['type'] == 'radio') {
				var checked = jQuery(this).find("input[type='radio']").is(":checked") ? "checked=\"checked\"" : "";
				strItem += '<input type="radio" value="'+value+'" name="radio-'+inputId+'" id="'+id+'" '+checked+'>';
			}
			
			strItem += '<label for="'+id+'">'+name+'</label>';
			strItem += '</li>';
			
			var item = jQuery(strItem);
			
			destination.append(item);
		});
	}
	
};

renderSocialLink = function (settings) {
	var destination = jQuery(settings['list']['destination']);
	destination.find("a").remove();
	
	jQuery(settings['list']['source'] + " li").each(function (index, element) {
		var id = jQuery(this).attr("id");
		var href = jQuery(this).find(".nino-socialLinkUrl input").val();
		var social_icon = jQuery(this).find(".nino-input .selected-icon i").attr("class");
		var link = jQuery("<a class=\""+id+"\" href=\""+href+"\"><span class=\"fa "+social_icon+"\"></span></a>");
		destination.append(link);
	});
};